<template>
  <div ref="piechart" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Piechart',
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const data = [{
        name: '大型网格',
        value: 40
      }, {
        name: '中型网格',
        value: 30
      }, {
        name: '小型网格',
        value: 20
      }]
      const name = data.map((item) => item.name)
      const value = data.map((item) => item.value)
      const sum = value.reduce((a, b) => {
        return a + b
      })
      const color = [
        [
          'rgb(24, 183, 142)',
          'rgb(1, 179, 238)',
          'rgb(22, 75, 205)',
          'rgb(52, 52, 176)'
        ],
        ['rgba(24, 183, 142,0.1)',
          'rgba(1, 179, 238,0.1)',
          'rgba(22, 75, 205,0.1)',
          'rgba(52, 52, 176,0.1)'
        ]
      ]
      const series = []
      const yAxis = []
      for (let i = 0; i < data.length; i++) {
        series.push({
          name: '',
          type: 'pie',
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [45 - i * 10 + '%', 40 - i * 10 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: data[i].value,
            name: data[i].name
          },
          {
            value: sum - data[i].value,
            name: '',
            itemStyle: {
              color: 'transparent'
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }
          ]
        })
        series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [45 - i * 10 + '%', 40 - i * 10 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: 7.5,
            itemStyle: {
              color: color[1][i]
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          },
          {
            value: 2.5,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }
          ]
        })
        yAxis.push(((data[i].value / sum) * 100).toFixed(2) + '%')
      }
      var myChart = echarts.init(this.$refs.piechart)
      var option = {
        color: color[0],
        legend: {
          show: true,
          icon: 'circle',
          top: 'center',
          left: '65%',
          data: name,
          orient: 'vertical',
          formatter: (name) => {
            return (
              '{title|' + name + '}\n{value|' + data.find((item) => {
                return item.name === name
              }).value + '}{value|人}'
            )
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                lineHeight: 20,
                color: 'rgb(0, 178, 246)'
              },
              value: {
                fontSize: 14,
                lineHeight: 20,
                color: '#000'
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}<br>{b}:{c}({d}%)'
        },
        grid: {
          top: '26%',
          left: '40%',
          width: '40%',
          height: '21%',
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: '#000',
              fontSize: 13
            },
            show: true
          },
          data: yAxis
        }],
        xAxis: [{
          show: false
        }],
        series: series
      }

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
</style>
